import 'package:edu/pages/common/shopping_cart_button.dart';
import 'package:edu/pages/course/course_detail/course_detail_page_logic.dart';
import 'package:edu/utils/account_info.dart';
import 'package:edu/utils/app_router.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';
import 'package:tuple/tuple.dart';

class CourseDetailAppBar extends StatefulWidget implements PreferredSizeWidget {
  final GlobalKey shoppingCartButtonKey;

  CourseDetailAppBar({required this.shoppingCartButtonKey})
    : super(key: GlobalKey<_CourseDetailAppBarState>());

  @override
  State<CourseDetailAppBar> createState() => _CourseDetailAppBarState();

  @override
  Size get preferredSize {
    final state = (key as GlobalKey<_CourseDetailAppBarState>).currentState;
    return state?.preferredSize ??
        const Size.fromHeight(kMinInteractiveDimensionCupertino);
  }
}

class _CourseDetailAppBarState extends State<CourseDetailAppBar> {
  CupertinoNavigationBar? _bar;
  late final Widget _mainWidget;

  Size? get preferredSize {
    return _bar?.preferredSize;
  }

  @override
  void initState() {
    super.initState();
    _mainWidget = _buildMainWidget();
  }

  @override
  Widget build(BuildContext context) {
    return _mainWidget;
  }

  Widget _buildMainWidget() {
    return Builder(
      builder: (context) {
        _bar ??= CupertinoNavigationBar(
          backgroundColor: Theme.of(context).colorScheme.surface,
          border: const Border(bottom: BorderSide(color: Colors.transparent)),
          padding: const EdgeInsetsDirectional.only(start: 10, end: 10),
          leading: Row(
            children: [
              SizedBox(
                width: 36,
                height: 36,
                child: IconButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  icon: const Icon(Icons.arrow_back_ios_new_sharp, size: 22),
                  padding: EdgeInsets.zero,
                ),
              ),
              Selector<CourseDetailPageLogic, Tuple2<bool, String?>>(
                selector: (_, logic) =>
                    Tuple2(logic.showTitle, logic.courseTitle),
                builder: (context, v, child) {
                  if (v.item1 && v.item2 != null) {
                    // final maxWidth = MediaQuery.of(context).size.width + 200;
                    return SizedBox(
                      width: 240,
                      child: Text(
                        v.item2!,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: Theme.of(context).textTheme.titleMedium
                            ?.copyWith(fontWeight: FontWeight.bold),
                      ),
                    );
                  } else {
                    return const SizedBox.shrink();
                  }
                },
              ),
              const SizedBox(width: 5),
            ],
          ),
          trailing: Selector<CourseDetailPageLogic, bool>(
            selector: (_, logic) => logic.isContentEmpty,
            builder: (context, v, child) {
              if (v) {
                return const SizedBox.shrink();
              } else {
                return Row(
                  children: [
                    const Spacer(),
                    // 课程收藏
                    SizedBox(
                      width: 36,
                      height: 36,
                      child: IconButton(
                        padding: EdgeInsets.zero,
                        onPressed: () {
                          if (AccountInfo.shared.isLoggedIn == false) {
                            context.pushNamed(AppRouter.kLogin);
                          } else {
                            context
                                .read<CourseDetailPageLogic>()
                                .toggleFavorite();
                          }
                        },
                        icon: Selector<CourseDetailPageLogic, bool>(
                          selector: (_, logic) => logic.isMyFavorite,
                          builder: (context, v, child) {
                            if (v) {
                              final color = Theme.of(
                                context,
                              ).colorScheme.primary;
                              return Icon(
                                Icons.favorite,
                                size: 22,
                                color: color,
                              );
                            } else {
                              return const Icon(
                                Icons.favorite_outline,
                                size: 22,
                              );
                            }
                          },
                        ),
                      ),
                    ),
                    // 购物车
                    SizedBox(
                      width: 36,
                      height: 36,
                      child: ShoppingCartButton(
                        key: widget.shoppingCartButtonKey,
                      ),
                    ),
                    // 课程分享
                    SizedBox(
                      width: 36,
                      height: 36,
                      child: IconButton(
                        onPressed: () {},
                        icon: const Icon(Icons.share, size: 22),
                      ),
                    ),
                  ],
                );
              }
            },
          ),
        );
        return _bar!;
      },
    );
  }
}
